<template>
  <el-dialog v-model="dialogFormVisible" :title="dialogTitle" size="1000" @close="handleClose">
    <el-form
      :model="formData"
      ref="formRef"
      :rules="rules"
      label-position="right"
      label-width="120px"
      size="default"
      :scroll-to-error="true"
      :show-message="false"
    >
      <el-form-item label="厂家名称" prop="factory_name" class="required label-right-align">
        <el-input
          v-model="formData.factory_name"
          type="text"
          clearable
          :style="{ width: '300px' }"
          placeholder="请输入厂家名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="厂家图标" prop="logo">
        <el-button type="primary" @click="openUpload">选择图片</el-button>
        <div v-if="formData.logo" class="img">
          <img :src="formData.logo" width="80" height="80" />
        </div>
        <el-text>建议上传尺寸: 80x80px, 格式: JPG/PNG, 大小不超过2MB</el-text>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <el-card v-if="formData.id > 0">
      <template v-slot:header>
        <div
          class="title"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
          "
        >
          <h2>厂家产品</h2>
          <el-button
            type="primary"
            :disabled="!formData.id"
            @click="
              handleInfo({
                factory_id: formData.id,
                type: tabName,
              })
            "
            >添加产品</el-button
          >
        </div>
        <el-tabs v-model="tabName" type="card">
          <el-tab-pane label="太阳膜质保" name="membrane">
            <el-table :data="membraneData" border style="width: 100%">
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column label="产品名称" prop="title"></el-table-column>
              <el-table-column label="质保年限（年）" prop="years"></el-table-column>
              <el-table-column label="操作" width="200">
                <template v-slot="scope">
                  <el-button type="primary" @click="handleInfo(scope.row)">编辑</el-button>
                  <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="车衣/改色" name="guarantee">
            <el-table :data="guaranteeData" border style="width: 100%">
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column label="产品名称" prop="title"></el-table-column>
              <el-table-column label="质保年限（年）" prop="years"></el-table-column>
              <el-table-column label="操作" width="200">
                <template v-slot="scope">
                  <el-button type="primary" @click="handleInfo(scope.row)">编辑</el-button>
                  <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-card>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClose">关闭</el-button>
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
  <Upload v-if="isupload" :isupload="isupload" type="image" @returnImgs="returnImgsFunc"
    >上传图片</Upload
  >
  <productForm ref="productFormRef" @getTable="getProduct"></productForm>
</template>

<script setup lang="ts">
import { ref, reactive, defineExpose, defineEmits, onMounted, computed } from "vue";
import { ElMessage } from "element-plus";
import productForm from "./productForm.vue";
import { addApi, editApi, getProductListAPi, deleteProductApi } from "@/api/carfilm/factory";
const dialogFormVisible = ref(false);
const formRef = ref<any>(null);
const productFormRef = ref<any>(null);
const dialogTitle = ref("");
const isupload = ref(false);
const productData = ref<
  | {
      id: number;
      title: string;
      type: "membrane" | "guarantee";
      factory_id: number;
      years: number;
    }[]
  | null
>([]);
const membraneData = computed(() => {
  return productData.value?.filter((item: any) => item.type == "membrane");
});
const guaranteeData = computed(() => {
  return productData.value?.filter((item: any) => item.type == "guarantee");
});
const formData = ref({
  id: 0,
  factory_name: "",
  logo: "",
});
const tabName = ref("membrane");
const rules = reactive({
  factory_name: [
    {
      required: true,
      message: "请输入厂家名称",
    },
  ],
});

const emits = defineEmits(["getTable"]);
function addSave() {
  addApi(formData.value)
    .then((res) => {
      ElMessage.success("添加成功");
      emits("getTable");
      //dialogClose();
      console.log(res);
      formData.value.id = res.data.id;
    })
    .catch((err) => {});
}
function editSave() {
  editApi(formData.value)
    .then((res) => {
      ElMessage.success("编辑成功");
      emits("getTable");
      dialogClose();
    })
    .catch((err) => {});
}

function submitForm() {
  formRef.value.validate().then(() => {
    if (formData.value.id == 0) {
      addSave();
    } else {
      editSave();
    }
  });
}

const dialogClose = () => {
  dialogFormVisible.value = false;
};

const getProduct = () => {
  getProductListAPi({
    factory_id: formData.value.id,
  }).then((res) => {
    productData.value = res.data;
  });
};

const dialogOpen = (row: any) => {
  dialogFormVisible.value = true;
  if (row?.id > 0) {
    dialogTitle.value = "编辑厂家";
    formData.value = {
      id: row.id,
      factory_name: row.factory_name,
      logo: row.logo,
    };
    getProduct();
  } else {
    dialogTitle.value = "添加厂家";
  }
};

const handleClose = () => {
  formRef.value.resetFields();
  formData.value = {
    id: 0,
    factory_name: "",
    logo: "",
  };
  dialogFormVisible.value = false;
};
/*上传*/
const openUpload = (e: any) => {
  isupload.value = true;
};
/*获取图片*/
const returnImgsFunc = (e: any) => {
  if (e != null && e.length > 0) {
    formData.value.logo = e[0].file_path;
  }
  isupload.value = false;
};
const handleDelete = (id: number) => {
  deleteProductApi(id).then((res) => {
    ElMessage.success("删除成功");
    getProduct();
  });
};
const handleInfo = (row: any) => {
  productFormRef.value.dialogOpen(row);
};
defineExpose({
  dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
</style>

<style lang="scss" scoped></style>
